<template>
  <div class="a" style="">

    <div style="width: 60%;margin: 0px auto;padding-top: 20px">
      <b style="font-size: 18px;font-weight: bold;">表现总结</b>
      <div style="margin:30px 0px;height: 300px;padding: 20px;background-color: white;border-radius: 20px">
        <div style="width: 53%;height: 260px;float: left">
          <div id="some" style="width: 300px;height: 300px"  ></div>
        </div>
        <div style="width: 42%;height: 260px;float: right;">
          <div style="margin: 43px 0px">
            <span style="font-weight: bold;">投稿：</span>
            <span style="font-size: 14px;color: gray">你的投稿为{{obj.tougao}}</span>
          </div>
          <div style="margin: 43px 0px">
            <span style="font-weight: bold;">播放：</span>
            <span style="font-size: 14px;color: gray"> 你的投稿为{{obj.dianji}}</span>
          </div>
          <div style="margin: 43px 0px">
            <span style="font-weight: bold;">点赞：</span>
            <span style="font-size: 14px;color: gray"> 你的投稿为{{obj.dianzan}}</span>
          </div>
        </div>
      </div>
      <div >
        <b style="font-size: 18px;font-weight: bold;">表现总结</b>
        <div style="height: 100px;margin-top: 30px;">
          <div style="width: 15.5%;height: 80px;float: left;border-radius: 18px;background-color: white;padding-left: 8px">
            播放量  <i class="el-icon-caret-right"></i>
            <br>
            <h3>{{obj.dianji}}</h3>
          </div>
          <div style="width: 15.5%;height: 80px;float: left;margin-left: 10px;border-radius: 18px;background-color: white;padding-left: 8px">
            评论  <i class="el-icon-s-comment"></i><br>
            <h3>{{obj.pinglun}}</h3>
          </div>
          <div style="width: 15.5%;height: 80px;float: left;border-radius: 18px;background-color: white;padding-left: 8px">
            点赞<i class="el-icon-thumb"></i><br>
            <h3>{{obj.dianzan}}</h3>
          </div>
          <div style="width: 15.5%;height: 80px;float: left;margin-left: 10px;border-radius: 18px;background-color: white;padding-left: 8px">
            收藏<i class="el-icon-orange"></i><br>
            <h3>{{obj.souchang}}</h3>
          </div>
          <div style="width: 15.5%;height: 80px;float: left;margin-left: 10px;border-radius: 18px;background-color: white;padding-left: 8px">
            弹幕<i class="el-icon-s-operation"></i><br>
            <h3>{{ obj.danmu }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "DC",
  data(){
    return{
      obj:{},
      charts:{}
    }
  },
  created() {
    this.load();
    setTimeout(r=>{
      this.$nextTick(function () {
        this.someLine();
      });
    },2000)

  },
  methods: {
    load(){
      let user = sessionStorage.getItem("user")
      var users = JSON.parse(user)
      this.$http.get("hemo/system/video/query?userId="+users.userId).then(r=>{
        this.obj=r.data
      })
    },
    someLine(){
      console.log(this.obj)
      var v1=0,v2=0,v3=0
      v1 = this.obj.tougao
       v2 =this.obj.dianji
       v3 = this.obj.dianzan
      console.log()
      var vv=[
        { value:v1, name: '投稿' },
        { value: v2, name: '播放' },
        { value: v3, name: '点赞' },
      ]
      this.charts = echarts.init(document.getElementById('some'))
      var option;

      option = {
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: vv,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.charts.setOption(option)
    },
  }
}

</script>

<style scoped>
.a {
  background-color: snow;
  height: 600px;
}
</style>
